<template>
  <view class="category-container">
    <!-- 搜索框 -->
    <view class="search-container">
      <uni-search-bar placeholder="搜索商品名称" @focus="goToSearch" cancelButton="none" radius="5" />
    </view>

    <!-- 分类内容区 -->
    <view class="box">
      <!-- 左侧分类导航 -->
      <scroll-view class="scroll-view" scroll-y>
        <view v-for="(item, index) in categorys" :key="item.id" class="nav-item"
          :class="{ active: activeIndex === index }" @tap="clickCategory(index, item.id)">
          {{ item.title }}
        </view>
      </scroll-view>

      <!-- 右侧商品区 -->
      <view class="content">
        <image v-if="currentCategory.img_url" :src="currentCategory.img_url" mode="aspectFit" class="category-image"
          style="width: 255px; height: 76px" />

        <template v-if="goods.length">
          <view v-for="item in goods" :key="item.id" class="goods-item" @click="goToDetail(item.id)">
            <image :src="item.thumb_path" mode="aspectFit" class="goods-image" />
            <view class="goods-info">
              <text class="goods-title">{{ item.title }}</text>
              <view class="goods-price">
                <text class="sell-price">¥{{ item.sell_price }}.00</text>
                <text v-if="item.market_price" class="market-price">¥{{ item.market_price }}</text>
              </view>
            </view>
          </view>
        </template>

        <view v-else class="empty">
          <image src="@/static/images/empty-image-error.png" mode="widthFix" style="width: 100px" />
          <text>暂无商品</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reqCategory, reqCategoryGoods } from '@/api/index';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { ref } from 'vue';

const categorys = ref([]);
const activeIndex = ref(0);
const currentCategory = ref({});
const goods = ref([]);

onLoad(() => {
  getCategorys();
});

// 跳转搜索
const goToSearch = () => {
  uni.navigateTo({ url: '/pages/search/search' });
};

// 获取分类数据
const getCategorys = async () => {
  const res = await reqCategory();
  categorys.value = res;
  if (res.length) {
    currentCategory.value = res[0];
    getCategoryGoods(res[0].id);
  }
};

// 获取分类商品
const getCategoryGoods = async (categoryId) => {
  try {
    goods.value = await reqCategoryGoods(categoryId);
  } catch {
    goods.value = [];
  }
};

// 点击分类
const clickCategory = (index, categoryId) => {
  activeIndex.value = index;
  currentCategory.value = categorys.value[index];
  getCategoryGoods(categoryId);
};

// 跳转详情
const goToDetail = (id) => {
  uni.navigateTo({ url: `/pages/goods_package/goodsdetail/goodsdetail?id=${id}` });
};
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.category-container {
  .box {
    display: flex;
  }

  .scroll-view {
    width: px2rpx(80);
    height: 100%;
    background-color: #f6f6f6;

    .nav-item {
      position: relative;
      height: px2rpx(60);
      line-height: px2rpx(60);
      text-align: center;
      font-size: px2rpx(14);
      color: #333;

      &.active {
        background-color: #fff;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: px2rpx(4);
          height: px2rpx(20);
          background-color: #ee0a24;
        }
      }
    }
  }

  .search-container {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #fff;
    width: 100%;
    height: px2rpx(54);
  }

  .content {
    flex: 1;
    height: 100vh;
    overflow: auto;
    background-color: #f8f8f8;
    padding: px2rpx(10);

    .category-image {
      display: block;
      margin: 0 auto px2rpx(10);
    }

    .goods-item {
      display: flex;
      padding: px2rpx(8);
      margin-bottom: px2rpx(8);
      background-color: #fff;

      .goods-image {
        width: px2rpx(88);
        height: px2rpx(88);
        margin-right: px2rpx(10);
      }

      .goods-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .goods-title {
          font-size: px2rpx(14);
          color: #333;
          line-height: 1.3;
          margin-bottom: px2rpx(4);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .goods-price {
          .sell-price {
            color: #f60;
            font-size: px2rpx(16);
            font-weight: bold;
            margin-right: px2rpx(8);
          }

          .market-price {
            font-size: px2rpx(12);
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }

    .empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 50%;
      font-size: px2rpx(14);
      color: #999;

      image {
        margin-bottom: px2rpx(10);
      }
    }
  }
}
</style>
